<template>
  <page-header-wrapper :title="false">
    <div class="Role">
      <a-spin tip="加载中..." class="position" v-if="roleLoading"> </a-spin>
      <a-modal
        width="1000px"
        v-model="detailsVisible"
        title="充电柜运营状态详情"
        @cancel="() => (this.detailsVisible = false)"
        destroyOnClose
      >
        <div id="modalContent">
          <a-spin tip="加载中..." class="position" v-if="detailLoading"> </a-spin>
          <typicalTable
            ref="insideTable"
            :tableConfig="detailConfig"
            :tableData="form"
            @getTableData="getDetailData"
          ></typicalTable>
        </div>
        <template slot="footer">
          <Button
            type="reset"
            label="关闭"
            @click="
              () => {
                this.detailsVisible = false;
              }
            "
          ></Button>
        </template>
      </a-modal>
      <typicalSearch ref="insideSearch" :searchConfig="searchConfig" @searchMethod="getTableData"></typicalSearch>
      <div class="table">
        <div class="tableTitle">
          <div class="title">运营状态统计</div>
        </div>
        <div class="tableList">
          <typicalTable
            ref="insideTable"
            :tableConfig="tableConfig"
            :tableData="tableData"
            @getTableData="getTableData"
          >
            <template v-slot="slotProps">
              <Button label="详情" @click="handleEdit(slotProps.record)"></Button>
            </template>
          </typicalTable>
        </div>
      </div>
    </div>
  </page-header-wrapper>
</template>
<script>
import moment from 'moment';
import typicalSearch from '@/components/typicalSearch';
import typicalTable from '@/components/typicalTable';
import Input from '@/components/typicalControl/Input';
import InputNumber from '@/components/typicalControl/InputNumber';
import treeSelect from '@/components/typicalControl/treeSelect';
import Select from '@/components/typicalControl/select';
import Button from '@/components/typicalControl/button';
import { getYesNo } from '@/utils/frequentInterface';

import { equipmentMonitoring, listNetworksAll } from '@/api/cabin';
import { organizationsTree, operations } from '@/api/system';

export default {
  name: 'RunningState',
  components: {
    typicalSearch: typicalSearch,
    typicalTable: typicalTable,
    Input: Input,
    InputNumber: InputNumber,
    treeSelect: treeSelect,
    Select: Select,
    Button: Button,
  },
  data() {
    return {
      roleLoading: false, // 加载表格的loading
      detailLoading: false,
      detailsVisible: false,
      form: {
        records: [],
        total: 0,
      },
      // 搜索组件配置
      searchConfig: {
        formItemList: [
          {
            type: 'selectTree',
            prop: 'searchOrganization',
            value: undefined,
            label: '所属组织',
            treeData: [],
            select: this.treeSelect,
          },
          {
            type: 'input',
            prop: 'searchNetworkName',
            value: undefined,
            label: '场站网点',
          },
        ],
        parent: this,
      },
      detailConfig: {
        columns: [
          {
            title: '充电柜编号',
            dataIndex: 'code',
            ellipsis: true,
            width: '25%',
          },
          {
            title: '充电柜名称',
            dataIndex: 'name',
            ellipsis: true,
            width: '25%',
          },
          {
            title: '格口数量',
            dataIndex: 'lattice',
            ellipsis: true,
          },
          {
            title: '空闲数量',
            dataIndex: 'free',
            ellipsis: true,
          },
          {
            title: '使用中数量',
            dataIndex: 'inUse',
            ellipsis: true,
          },
          {
            title: '故障数',
            dataIndex: 'fault',
            ellipsis: true,
          },
        ],
        pageSize: this.$store.state.user.defaultPaginationPagesize,
        pageSizeOptions: this.$store.state.user.defaultPaginationOptions,
        parent: this,
      },
      // 列表组件配置
      tableConfig: {
        columns: [
          {
            title: '组织机构',
            dataIndex: 'organName',
            ellipsis: true,
          },
          {
            title: '场站网点',
            dataIndex: 'name',
            ellipsis: true,
          },
          {
            title: '格口数量',
            dataIndex: 'lattice',
            ellipsis: true,
          },
          {
            title: '空闲数量',
            dataIndex: 'free',
            ellipsis: true,
          },

          {
            title: '使用中数量',
            dataIndex: 'inUse',
            ellipsis: true,
          },
          {
            title: '故障数量',
            dataIndex: 'fault',
            ellipsis: true,
          },

          {
            title: '操作',
            scopedSlots: { customRender: 'action' },
          },
        ],
        pageSize: this.$store.state.user.defaultPaginationPagesize,
        pageSizeOptions: this.$store.state.user.defaultPaginationOptions,
        parent: this,
      },
      // 列表组件数据
      tableData: {
        records: [],
        total: 0,
      },
      currentId: '',
      oDictionary: {
        listNetworksAll: [],
      },
      originationCode:'',
    };
  },
  created() {
    this.getDictionary();
  },
  mounted() {
    this.$refs.insideSearch.searchInfo();
  },
  methods: {
    /**
     * [getDictionary 获取各种字典]
     * @return {[type]} [description]
     */
    getDictionary() {
      // 组织列表树形结构数据
      organizationsTree().then((res) => {
        if (res.code === 200) {
          for (var i = 0; i < this.searchConfig.formItemList.length; i++) {
            if (this.searchConfig.formItemList[i].prop === 'searchOrganization') {
              this.searchConfig.formItemList[i].treeData = res.data;
              break;
            }
          }
        }
      });
    },

    /**
     * [searchOptListDynamicLoading 搜索下拉动态加载]
     * @param  {[type]} searchOrganization [组织机构]
     * @return {[type]}                      [description]
     */
    treeSelect(e) {
      this.originationCode = e.code;
    },

    /**
     * [getTableData 获取表格数据]
     * @param  {[type]} searchParam [搜索条件]
     * @return {[type]}             [description]
     */
    getTableData(searchParam) {
      if (!searchParam) throw new Error('getTableData 没有入参搜索条件！');
      this.roleLoading = true;
      let params = {
        pageNum: searchParam.pageNumber ? searchParam.pageNumber + 1 : 1,
        pageSize: searchParam.pageSize,
        name: searchParam.searchNetworkName,
        code: searchParam.searchOrganization ? this.originationCode :'',
      };
      operations('/select', 'post', params)
        .then((res) => {
          if (res.code == 200) {
            let params = {
              records: res.data,
              total: Number(res.total),
            };
            this.tableData = params;
          } else {
            this.tableData.records = [];
            this.tableData.total = 0;
          }
        })
        .finally(() => {
          this.roleLoading = false;
        });
    },

    /**
     * [handleEdit 打开详情]
     * @param  {[type]} row          [当前行数据]
     * @return {[type]}              [description]
     */
    handleEdit(row) {
      this.currentId = row.id;
      this.detailsVisible = true;
      this.form = {
        records:[],
        total:0
      };
      
      this.getDetailData();
    },
    getDetailData(searchParam) {
      this.detailLoading = true;

      operations('/selectDetails', 'get', {
        id: this.currentId,
        pageNum: searchParam && searchParam.pageNumber ? searchParam.pageNumber + 1 : 1,
        pageSize: searchParam && searchParam.pageSize ? searchParam.pageSize : 10,
      })
        .then((res) => {
          if (res.code == 200) {
            let params = {
              records: res.data,
              total: Number(res.total),
            };
            this.form = params;
          } else {
            this.form.records = [];
            this.form.total = 0;
          }
        })
        .finally(() => {
          this.detailLoading = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.Role {
  width: 100%;
  height: calc(100vh - 150px);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  position: relative;

  .table {
    flex: 1;
    background: white;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    .tableTitle {
      width: 100%;
      height: 64px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ececec;
      padding: 0 20px;
      margin-bottom: 10px;
      .title {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 550;
      }
      .addButton {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
    .tableList {
      // max-height: calc(100vh - 380px);
      // overflow: auto;
      /deep/ .tableScroll {
        max-height: calc(100vh - 380px);
        overflow: auto;
      }
    }
  }
}

#modalContent {
  width: 100%;
  min-height: 380px;
  max-height: 580px;
  overflow: auto;
  position: relative;
  text-align: center;
  /deep/ .tableBlock{
    min-height: auto;
   margin-bottom: 40px;
  }
  /deep/ .paginationBlock{
    position: absolute;
    bottom: 0;
  }
}
.position {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.03);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
</style>
